<template>
  <div class="home-main">
    <Carousel autoplay>
      <div class="banner" v-for="item of images" :key="item.id">
        <img :src="item.url" alt="" />
      </div>
    </Carousel>
    <div class="home-body">
      <div class="left">
        <div class="form-box">
          <img src="@/assets/home-page.jpg" alt="" />
          <div class="label">用户登录</div>
          <div class="input">
            <Input placeholder="请填写" v-model:value="loginProp.username" style="width: 198px" @keyup.enter="doLogin">
            <template v-slot:addonBefore>
              <span>账号</span>
            </template>
            </Input>
            <Input placeholder="请填写" style="width: 198px" type="password" v-model:value="loginProp.password"
              @keyup.enter="doLogin">
            <template v-slot:addonBefore>
              <span>密码</span>
            </template>
            </Input>
            <Button @click="doLogin">登录</Button>
          </div>
        </div>
        <div class="html-box">
          <img class="html-img" :src="homeConfigStore.value.image" />
          <div class="htmlarea" v-html="richText.remark"></div>
        </div>
      </div>
      <div class="right">
        <div class="title">通知消息 <span>（点击浏览）</span></div>
        <ol>
          <li v-for="item of notices" :key="item.id" :title="item.title">
            {{ item.title }}
          </li>
        </ol>
        <div v-for="item of links" :key="item.id" class="link">
          <img :src="item.url" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { HomeConfigStore } from "@/stores/main";
import { UserStore } from "@/stores/user";
import { Carousel, Input, Button, message } from "ant-design-vue";
import { CmsSliderItemVo, CmsNewsVo, SysCmsNoticeVo } from "@/api/home/types";
import { getHomeImages, getHomeNews, getNotices } from "@/api/home/index";
import * as loginApi from "@/api/login/index";
import { LoginProp } from "@/api/login/types";
const images = ref<CmsSliderItemVo[]>([]);
const links = ref<CmsSliderItemVo[]>([]);
const richText = ref<CmsNewsVo>({});
const notices = ref<SysCmsNoticeVo[]>([]);
const homeConfigStore = HomeConfigStore();
const userStore = UserStore();
const loginProp = reactive<LoginProp>({ username: "", password: "" });
// 以下为页面初始化的逻辑
initHomePage();
/**
  * 获取首页的配置信息，动态加载首页
*/
async function initHomePage() {
  getHomeImages("home").then((res) => (images.value = res.data || []));
  getHomeImages("homeLinks").then((res) => (links.value = res.data || []));
  getHomeNews("0").then((res) => (richText.value = { ...res.data }));
  getNotices("1").then((res) => (notices.value = res.data || []));
}
// 以下是关于登录的逻辑
/**
  * 登录
*/
async function doLogin() {
  if (!loginProp.username) return message.error("请输入账号！");
  if (!loginProp.password) return message.error("请输入密码！");
  const res = await loginApi.doLogin({ ...loginProp });
  if (!res.data) return message.error("账号或密码不正确！");
  if (res.msg == '1') {
    // todo 打开设置密码弹框
    return message.error("需要重新设置密码！");
  }
  userStore.doLogin(res.data)
}
</script> 
<style scoped lang="less">
.home-main {
  .banner {
    background: #364d79;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      max-height: 360px;
    }
  }

  .home-body {
    width: @containerWidth;
    margin: 0 auto;
    display: flex;

    .right {
      width: 245px;
      overflow: hidden;
      padding-left: 14px;

      .title {
        margin-top: 14px;
        width: 205px;
        border-bottom: 2px solid #666;
        display: inline-block;
        line-height: 32px;
        height: 32px;
        font-size: 16px;
        font-weight: 700;
        color: #333;

        span {
          font-size: 12px;
          color: red;
        }
      }
    }

    .left {
      flex: 1;
      overflow: hidden;
    }

    ol {
      list-style: inside;
      padding: 0;
      height: 112px;
      overflow: auto;
    }

    li {
      list-style: inside;
      cursor: pointer;
      line-height: 26px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .link {
      width: 200px;
      margin-bottom: 10px;

      img {
        width: 100%;
        height: auto;
      }

      &:hover {
        transform: scale(0.95);
        transition: all 0.2s linear;
      }
    }
  }

  .form-box {
    display: flex;
    height: 60px;
    align-items: center;

    img {
      height: 45px;
      width: auto;
      margin-right: auto;
    }

    .label {
      font-size: 16px;
      font-weight: 700;
      padding-right: 12px;
    }

    .input {
      width: 490px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  /deep/ .ant-input-group-addon {
    border-color: #64bf26;
    background: #64bf26;
    color: #fff;
  }

  /deep/.ant-input {
    border: 1px solid #64bf26;
    height: 32px;
    font-size: 12px;
  }

  .ant-btn {
    padding: 0 24px;
    border-color: #64bf26;
  }

  .html-box {
    // height: 460px;
    overflow: auto;
    overflow-x: hidden;
    padding-right: 20px;
  }

  .htmlarea {
    display: inline;
  }

  .html-img {
    float: left;
    width: 247px;
    height: 152px;
    margin: 0 5px -1px 0;
    overflow: hidden;
  }
}
</style>

